<template>

  <div id="amap">

    <el-amap vid="amap" class="amap" :center="getPosition" :plugin="plugins">
      <el-amap-marker vid="component-marker" :position="getPosition" />
    </el-amap>

  </div>

</template>

 

<script>

export default {

  props: {
    // 定位
    position: {
      type: Array,
      default: [118.839087, 33.910599],
    },
  },

  data () {

    return {
      center: [118.839087, 32.910599],   // 地图初始化视图中心点
      plugins: [
        {
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 100, //超过10秒后停止定位，默认：无穷大
          maximumAge: 0, //定位结果缓存0毫秒，默认：0
          convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, //显示定位按钮，默认：true
          buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: "all",
          //地图定位按钮
          pName: "Geolocation",
          init (o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              console.log(result);
              if (result && result.position) {
                self.lng = result.position.lng;
                self.lat = result.position.lat;
                self.center = [self.lng, self.lat];
                self.loaded = true;
                self.$nextTick();
              }
            });
          },
        },
        {
          //地图工具条
          pName: "ToolBar",
          init (o) { },
        },
        {
          //左下角缩略图插件 比例尺
          pName: "Scale",
          init (o) { },
        },
      ],
    };

  },

  mounted () { },

  created () {

  },
  computed: {
    getPosition () {
      console.log(this.position)
      return this.position;
    },
  },

  methods: {}

};

</script>

 

<style scoped>
#amap {

  height: 100vh;

  width: 100vw;

}
</style>